<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"  
    xmlns:h="http://java.sun.com/jsf/html"  
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    template="/plantillas/plantilla-sistema.xhtml">  
    <f:metadata>
        <f:event type="preRenderView" 
                 listener="#{importarBean.validarAcceso}"/>
    </f:metadata>
    <ui:define name="cabecera">
        <title>Importar CatálogoTaxonómico</title>
        <link rel="shortcut icon"  
              href="/resources/imagenes/favicon.ico" />
        <style>
            #log {
               position: relative !important;
               width: 99.9%;
               height: 100%;
               left: 0;
               top: 0;
            }
        </style>
        <script type="text/javascript">
            $(window).load(function() {
               var log = $('#log');
               log.appendTo('#cargaPnl'); // append to container
               log.draggable('disable'); // disable draggable effect
               log.removeClass('ui-state-disabled'); // remove disabled (gray) style
            });
        </script>
        
    </ui:define>
    
    <ui:define name="contenido">
        
        <center>
            
            <p:panel id="importacionPnl" 
                     header="Importar Catálogo Taxonómico" 
                     style="width: 800px; font-size: 100%">
                <h:form enctype="multipart/form-data" prependId="false">
                    
                    <p:fieldset legend="Tipo de operación">
                        <h:panelGrid columns="2" cellpadding="10">  
                            <h:outputLabel for="tipoetlSor" value="Fuente de datos:" />
                            <p:selectOneRadio id="tipoetlSor" value="#{importarBean.tipoEtl}">
                                <p:ajax event="change" update="@form" />
                                <f:selectItems value="#{importarBean.itemsEtl}" />
                            </p:selectOneRadio>
                        </h:panelGrid> 
                    </p:fieldset>
                    
                    <p:fieldset id="csvFst" 
                                legend="Archivo CSV" 
                                rendered="#{importarBean.tipoEtl == 'CSV'}">
                        <p:fileUpload widgetVar="csvUplWgt"
                                      fileUploadListener="#{importarBean.cargarArchivo}" 
                                      mode="advanced"
                                      label="Seleccionar"
                                      showButtons="false"
                                      invalidFileMessage="Formato incorrecto"
                                      invalidSizeMessage="El archivo excede el tamaño máximo"
                                      allowTypes="/(\.|\/)(csv)$/"
                                      oncomplete="csvUplWgt.disable();
                                                  etlCsvWgt.enable();"
                                      style="width:400px"/>
                        <p:commandButton id="etlCsvBtn"
                                         widgetVar="etlCsvWgt"
                                         value="Procesar"
                                         actionListener="#{importarBean.ejecutarEtl}"
                                         onstart="cargaWgt.show()"
                                         onclick="etlCsvWgt.disable()" />
                    </p:fieldset>
                    
                    <p:fieldset id="xmlFst" legend="Archivo XML" rendered="#{importarBean.tipoEtl == 'XML'}">
                        <p:fileUpload widgetVar="xmlUplWgt" 
                                      fileUploadListener="#{importarBean.cargarArchivo}" 
                                      mode="advanced"
                                      label="Seleccionar"
                                      showButtons="false"
                                      invalidFileMessage="Formato incorrecto"
                                      invalidSizeMessage="El archivo excede el tamaño máximo"
                                      allowTypes="/(\.|\/)(xml)$/"
                                      oncomplete="xmlUplWgt.disable();
                                                  etlXmlWgt.enable();"
                                      style="width:400px"/>
                        <p:commandButton id="etlXmlBtn"
                                         widgetVar="etlXmlWgt"
                                         value="Procesar"
                                         actionListener="#{importarBean.ejecutarEtl}"
                                         onstart="cargaWgt.show()"
                                         onclick="etlXmlWgt.disable()" />
                    </p:fieldset>
 
                    <p:fieldset id="sqlFst" legend="Conexión SQL" rendered="#{importarBean.tipoEtl == 'SQL'}">
                        <h:panelGrid columns="2" cellpadding="10">  
                            
                            <h:outputLabel for="proveedorSom" value="Proveedor:" />
                            <p:selectOneMenu id="proveedorSom" 
                                             value="#{importarBean.proveedorBD}"
                                             required="true"
                                             requiredMessage="Valor requerido"
                                             style="width:125px">
                                <p:ajax event="change" update="jdbcTxt" /> 
                                <f:selectItem itemValue="" itemLabel="Seleccione..." />
                                <f:selectItems value="#{importarBean.itemsProveedor}" />
                            </p:selectOneMenu>
                            
                            <h:outputLabel for="hostTxt" value="Host:" />
                            <p:inputText id="hostTxt" 
                                         value="#{importarBean.hostBD}"
                                         required="true"
                                         requiredMessage="Valor requerido">
                                <p:ajax event="keyup" update="jdbcTxt" /> 
                            </p:inputText>
                            
                            <h:outputLabel for="puertoTxt" value="Puerto:" />
                            <p:inputText id="puertoTxt" 
                                         value="#{importarBean.puertoBD}"
                                         required="true"
                                         requiredMessage="Valor requerido">
                                <p:ajax event="keyup" update="jdbcTxt" /> 
                            </p:inputText>
                            
                            <h:outputLabel for="nombreTxt" value="Nombre de la BD:" />
                            <p:inputText id="nombreTxt" 
                                         value="#{importarBean.nombreBD}"
                                         required="true"
                                         requiredMessage="Valor requerido">
                                <p:ajax event="keyup" update="jdbcTxt" /> 
                            </p:inputText>

                            <h:outputLabel for="usuarioTxt" value="Usuario:" />
                            <p:inputText id="usuarioTxt" 
                                         value="#{importarBean.usuarioBD}"
                                         required="true"
                                         requiredMessage="Valor requerido">
                                <p:ajax event="keyup" update="jdbcTxt" /> 
                            </p:inputText>
                            
                            <h:outputLabel for="contrasenyaTxt" value="Contraseña:" />
                            <p:password id="contrasenyaTxt" 
                                        value="#{importarBean.contrasenyaBD}"
                                        required="true"
                                        requiredMessage="Valor requerido">
                                <p:ajax event="keyup" update="jdbcTxt" /> 
                            </p:password>
                            
                            <h:outputLabel for="jdbcTxt" value="JDBC URL:" />
                            <p:inputText id="jdbcTxt" 
                                         value="#{importarBean.jdbcBD}" 
                                         required="true"
                                         requiredMessage="Valor requerido"
                                         size="112" />
                            
                            <h:outputLabel for="consultaTxt" value="Consulta SQL:" />
                            <p:inputTextarea id="consultaTxt" 
                                             value="#{importarBean.consultaBD}" 
                                             required="true"
                                             requiredMessage="Valor requerido"
                                             cols="80"
                                             rows="10" />
                            
                        </h:panelGrid> 
                        
                        <p:commandButton id="etlSqlBtn"
                                         widgetVar="etlSqlWgt"
                                         value="Procesar"
                                         actionListener="#{importarBean.ejecutarEtl}"
                                         update="proveedorSom hostTxt puertoTxt 
                                                 nombreTxt usuarioTxt contrasenyaTxt 
                                                 jdbcTxt consultaTxt"
                                         onstart="cargaWgt.show()"
                                         onclick="etlSqlWgt.disable()" />
                        
                    </p:fieldset>       
   
                </h:form>
            </p:panel>
        </center>
        
    </ui:define>
    <ui:define name="extra">
              
        <p:dialog id="cargaDlg" 
                  modal="true" 
                  widgetVar="cargaWgt" 
                  header="Operación ETL"   
                  draggable="false" 
                  closable="false"
                  resizable="false"
                  width="400">  
            
            <p:panelGrid style="width:100%">
                
                <p:row>
                <p:column style="border-color: transparent;">
                <center>`
                <p:graphicImage id="cargaImg" library="imagenes" name="cargando.gif" width="50" height="50" />
                </center>
                </p:column> 
                <p:column style="border-color: transparent;">
                    <center>
                <h:outputText value="Procesando..." />
                </center>
                </p:column> 
                <p:column style="border-color: transparent;">
                    <center>
                <p:commandButton value="Cancelar"
                                 actionListener="#{importarBean.cancelarEtl}"/>
                </center>
                </p:column> 
                </p:row>
            </p:panelGrid>
            
            <p:panel id="cargaPnl" />
            <p:log id="log" />
        </p:dialog> 

    </ui:define>    
    
</ui:composition>